import React from 'react';
import { Button, Row, Col, Tooltip } from 'antd';
import NameListList from './list';
import CommonListsIndex from '../../../components/CommonLists/index';
import FilterTool from '../../../components/FilterTool';
import NameListAdd from './add';
import services from '../../../services/api';
import Modal from '../../../components/Modal/index';
import ExpandedList from './expandedList';
import './index.less';

class OuterListIndex extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'outerList';
    this.addComponent = NameListAdd;
    this.editComponent = NameListAdd;
    this.mapComponent = NameListAdd;
    this.listsComponent = NameListList;
    this.model_width = '1000px';
    this.queryParams = {};
    this.queryPanigation = {
      current_page: 1,
      page_size: 10,
    };
    this.queryTableParams = {};
    this.state = {
      list: [],
      totalCount: 0,
      interfaceGroupOptions: [],
    };
  }

  componentDidMount() {
    this.getInterfaceGroup();
  }

  // 获取接口分组列表
  getInterfaceGroup = async () => {
    const { data: interfaceGroupOptions, code } = await services.outerList.interfaceGroupList();
    if (!code) this.setState({ interfaceGroupOptions });
  };

  map = (record) => {
    const MapComponent = this.mapComponent;
    if (typeof EditComponent === 'string') {
      this.props.history.push(this.replaceUrlForId(MapComponent, record.id));
    } else if (MapComponent instanceof Object) {
      Modal.open({
        title: '字段映射',
        width: this.model_width ? this.model_width : '1000px',
        content: (
          <MapComponent
            record={record}
            closeModal={this.closeModal}
            dataType={this.state.dataType}
            actionType='map'
            treeData={this.state.listsData}
            {...this.props}
          />
        ),
        maskClosable: false,
        isOkBtn: false,
        isCancelBtn: false,
      });
    } else {
      console.log('something error');
    }
  };

  getNameListList = () => {
    services.nameList.list().then((res) => {
      if (res.code === 0) {
        res.data.list.forEach((item) => {
          item.calculate_field_type = item.calculate_field_type.split(',');
        });
        this.setState({
          ...res.data,
        });
      }
    });
  };

  // queryList(params) {
  //   services[this.api].list(params).then((res) => {
  //     if (res.code === 0) {
  //       this.setState({
  //         ...res.data,
  //       });
  //     } else {
  //       message.error(res.msg);
  //     }
  //   });
  // }

  // 关联策略
  // showRelationStrategy = (record) => {
  //   Modal.open({
  //     title: <>关联策略<span style={{ fontSize: 10, color: 'grey', marginLeft: 4 }}>仅展示当前部门拥有权限数据</span></>,
  //     width: '1000px',
  //     content: <RelationStrategy record={record} param={{ type: 'third_list', third_list_id: record.third_list_id }} />,

  //     isOkBtn: true,
  //     maskClosable: false,
  //     isCancelBtn: true,
  //     ok: () => Modal.close(),
  //   });
  // };
  // freshQueryList = () => {
  //   this.queryList({ ...this.queryPanigation, ...this.queryTableParams, ...this.queryParams });
  // };
  // refreshPanagaition = params => {
  //   this.queryPanigation = {
  //     ...this.queryPanigation,
  //     ...params
  //   };
  // };
  // refreshFilter = params => {
  //   this.queryParams = params;
  //   this.freshQueryList(this.queryParams);
  // };
  getColumns = () => {
    return [
      {
        title: '数据接口名称',
        key: 'name',
        ellipsis: true,
        dataIndex: 'name',
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className="overflowtext">
                <Button type='link' onClick={() => this.showDetail(record)}>
                  {record.name}
                </Button>
              </div>
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle('接口分组', this.state.interfaceGroupOptions, 'group_id', this.refreshTableFilter, [
              'id',
              'name',
            ])}
          </>
        ),
        key: 'group_name',
        dataIndex: 'group_name',
        width: 100,
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext'>{text}</div>
          </Tooltip>
        ),
      },
      {
        title: '输入字段数',
        key: 'input_field_count',
        dataIndex: 'input_field_count',
      },

      {
        title: '描述',
        key: 'remark',
        dataIndex: 'remark',
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '创建/修改人',
        key: 'create_user_name',
        dataIndex: 'create_user_name',
        render: (text, record) => {
          return (
            <Tooltip title={`${record.create_user_name}/${record.update_user_name}`} placement='topLeft'>{`${
              record.create_user_name
            }/${record.update_user_name}`}</Tooltip>
          );
        },
      },
      {
        title: '修改时间',
        key: 'update_time',
        dataIndex: 'update_time',
        width: 150,
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext'>{text}</div>
          </Tooltip>
        ),
      },
    ];
  };

  expandedRowRender = (record) => {
    return <ExpandedList value={record.listMap} record={record} />;
  };

  handleCustomParams = () => {
    this.props.history.push('/variable/map/customParams');
  };

  render() {
    const ListsComponent = this.listsComponent;
    const data = [
      {
        type: 'Search',
        key: 'keyword',
        name: 'keyword',
        defaultValue: '',
        placeholder: '请输入数据接口｜描述｜创建人｜修改人进行搜索',
      },
    ];
    return (
      <div>
        <Row type='flex' justify='space-between' align='middle'>
          <Col span={6}>
            <Button type='primary' onClick={this.add} style={{ marginRight: '20px' }}>
              添加接入数据
            </Button>
            <Button type='primary' onClick={this.handleCustomParams}>
              自定义参数管理
            </Button>
          </Col>
          <Col span={18}>
            <FilterTool
              data={data}
              colNum={1}
              query={this.freshQueryList}
              refreshFilter={this.refreshFilter}
              isOnChange={true}
              justify='end'
              refresh={this.resetList}
            />
          </Col>
        </Row>
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <ListsComponent
            {...this.state}
            {...this.props}
            edit={this.edit}
            map={this.map}
            onChangePagination={this.onChangePagination}
            showDetail={this.showDetail}
            queryList={this.freshQueryList}
            columns={this.getColumns()}
            expandedRowRender={this.expandedRowRender}
            rowKey='third_list_id'
          />
        </div>
      </div>
    );
  }
}

export default OuterListIndex;
